<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="case5-if">
    <h1 v-if="demoUp" v-on:click="clickIf">你猜我下面还有几句话？</h1>
    <template v-if="demoDown" >
        <p v-on:click="clickIf">猜对了吗</p>
        <p v-on:click="clickIf">我下面还有四句</p>
        <p v-on:click="clickIf">抱歉我说谎了</p>
    </template>
</div>
<script type="text/javascript">
    var caseDemo1=new Vue({
        el:"#case5-if",
        data:{
            demoUp:true,
            demoDown:false
        },
        methods:{
            clickIf:function () {
                    this.demoUp=!this.demoUp
                    this.demoDown=!this.demoDown
            }
        }
    })
    console.log("在元素和template中使用 v-if 指令：")
</script>
</body>
</html>